import React, { ChangeEvent } from 'react';
import { CopyOutlined, DeleteOutlined, SnippetsOutlined } from '@ant-design/icons';
import { Card, Input, message, Button, Space, Upload, Row, Col } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import copy from 'copy-to-clipboard';
import CryptoJS from 'crypto-js';

export default (): React.ReactNode => {
  const { TextArea } = Input;
  const { Dragger } = Upload;
  const [input, setInput] = React.useState('');
  const [outputMd5_32_u, setOutputMd5_32_u] = React.useState('');
  const [outputMd5_32_l, setOutputMd5_32_l] = React.useState('');
  const [outputMd5_16_u, setOutputMd5_16_u] = React.useState('');
  const [outputMd5_16_l, setOutputMd5_16_l] = React.useState('');

  const inputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
    const inputValue = e.target.value;
    jiaMiAndJieMi(inputValue);
  };
  const jiaMiAndJieMi = (inputValue: string) => {
    setInput(inputValue);
    try {
      setOutputMd5_32_u(CryptoJS.MD5(inputValue).toString().toUpperCase());
      setOutputMd5_32_l(CryptoJS.MD5(inputValue).toString().toLowerCase());
      setOutputMd5_16_u(CryptoJS.MD5(inputValue).toString().toUpperCase().substring(8, 24));
      setOutputMd5_16_l(CryptoJS.MD5(inputValue).toString().toLowerCase().substring(8, 24));
    } catch (e1) {
      console.log('加密失败！', e1);
      message.error('加密失败:' + e1.toString());
    }
  };
  const copyOnClick = (copyType: number) => {
    let copyText = '';
    if (copyType == 1) {
      copyText = outputMd5_32_u;
    } else if (copyType == 2) {
      copyText = outputMd5_32_l;
    } else if (copyType == 3) {
      copyText = outputMd5_16_u;
    } else if (copyType == 4) {
      copyText = outputMd5_16_l;
    }
    if (copy(copyText)) {
      message.info('已成功复制到剪切板');
    } else {
      message.error('复制失败！');
    }
  };
  const zhantie = () => {
    if (window.clipboardData) {
      let clipboardText = window.clipboardData.getData('Text');
      jiaMiAndJieMi(clipboardText);
    } else {
      if (window.navigator) {
        // const text = navigator.clipboard.readText();
        navigator.clipboard
          .readText()
          .then((text) => {
            jiaMiAndJieMi(text);
            // console.log('Pasted content: ', text);
          })
          .catch((err) => {
            message.info('粘贴内容失败：' + err.toString());
            console.error('Failed to read clipboard contents: ', err);
          });
      }
    }
  };

  const props = {
    openFileDialogOnClick: false,
    showUploadList: false,
    beforeUpload: (file: File) => {
      let fileReader = new FileReader();
      fileReader.onload = (e) => {
        console.log('读取文件', fileReader.result);
        jiaMiAndJieMi('' + fileReader.result);
      };
      fileReader.readAsText(file);
      return false;
    },
  };

  const copyButtonAfter = (copyType: number) => (
    <Button
      type="primary"
      icon={<CopyOutlined />}
      onClick={() => {
        copyOnClick(copyType);
      }}
    >
      复制
    </Button>
  );

  return (
    <PageHeaderWrapper>
      <Dragger {...props}>
        <TextArea
          style={{ marginTop: '-20px', marginBottom: '-20px' }}
          id="uploadInputId"
          value={input}
          onChange={inputChange}
          rows={8}
          placeholder="请输入需要加密的字符或拖动文件至此"
        />
      </Dragger>
      <Card>
        <Space>
          <Button type="primary" icon={<SnippetsOutlined />} onClick={zhantie}>
            粘贴内容
          </Button>
          <Button
            type="primary"
            icon={<DeleteOutlined />}
            onClick={() => {
              setInput('');
              setOutputMd5_32_u('');
              setOutputMd5_32_l('');
              setOutputMd5_16_u('');
              setOutputMd5_16_l('');
            }}
          >
            清空
          </Button>
        </Space>
      </Card>
      <Card>
        <Row gutter={8}>
          <Col span={12}>
            <Input
              addonBefore="MD5(32位)大写"
              addonAfter={copyButtonAfter(1)}
              value={outputMd5_32_u}
            />
          </Col>
          <Col span={12}>
            <Input
              addonBefore="MD5(32位)小写"
              addonAfter={copyButtonAfter(2)}
              value={outputMd5_32_l}
            />
          </Col>
        </Row>
      </Card>
      <Card>
        <Row gutter={8}>
          <Col span={12}>
            <Input
              addonBefore="MD5(16位)大写"
              addonAfter={copyButtonAfter(3)}
              value={outputMd5_16_u}
            />
          </Col>
          <Col span={12}>
            <Input
              addonBefore="MD5(16位)小写"
              addonAfter={copyButtonAfter(4)}
              value={outputMd5_16_l}
            />
          </Col>
        </Row>
      </Card>
    </PageHeaderWrapper>
  );
};
